<!--学.实操模块-->
<script setup lang="ts">

import IndexSmallTitle from "../common/IndexSmallTitle.vue";

const tableData = [
  {
    id: '1',
    scene: '应急场景',
    name: '接车进路上道岔失去表示',
    type:'设备故障类',
    station:'宝鸡东站',
    description:'描述信息',
    status:'已完成',
  },
  {
    id: '2',
    scene: '应急场景',
    name: '接车进路上道岔失去表示',
    type:'设备故障类',
    station:'宝鸡东站',
    description:'描述信息',
    status:'已完成',
  },
  {
    id: '3',
    scene: '应急场景',
    name: '接车进路上道岔失去表示',
    type:'设备故障类',
    station:'宝鸡东站',
    description:'描述信息',
    status:'已完成',
  },
  {
    id: '999',
    scene: '应急场景',
    name: '接车进路上道岔失去表示',
    type:'设备故障类',
    station:'宝鸡东站',
    description:'描述信息',
    status:'已完成',
  },
]
</script>

<template>
  <div style="background: #FFFFFF;border-radius: 6px;padding: 10px 20px">
  <IndexSmallTitle title="实操训练"></IndexSmallTitle>
    <el-table :data="tableData" border style="width: 100%;margin-top: 20px" class="custom-table">
      <el-table-column prop="id" label="序号" width="60" align="center"/>
      <el-table-column prop="scene" label="场景" width="180" align="center"/>
      <el-table-column prop="name" label="名称" align="center"/>
      <el-table-column prop="type" label="类型" align="center"/>
      <el-table-column prop="station" label="车站" align="center"/>
      <el-table-column prop="description" label="描述" align="center"/>
      <el-table-column prop="status" label="状态" align="center">
        <template v-slot="scope">
          <span class="status-text">{{ scope.row.status }}</span>
        </template>
      </el-table-column>
    </el-table>
  </div>
</template>

<style scoped>
.el-table{
  --el-table-header-bg-color:#EEF8FE;
  --el-table-header-text-color:#000000;
  --el-table-border-color:#909399;
}
.status-text {
  color: #3C8DF9;
}

</style>